<template>
  <div>
    <van-cell-group border>
      <van-field
        v-model="tel"
        label="手机号"
        placeholder="请输入电话号码"
        autofocus
      />
    </van-cell-group>

    <van-button
      class="but"
      type="danger"
      :disabled="!flag"
      round
      block
      @click="nextreg2"
      >下一步</van-button
    >
  </div>
</template>

<script>
import { doCheckPhone } from "../../api/user";
import Vue from "vue";
import { Dialog } from "vant";
Vue.use(Dialog);
export default {
  data() {
    return {
      tel: "",
      //flag: true, //flag需要依赖tel来计算他是否为true/false，所以可以用计算属性
    };
  },
  created() {
    // console.log();
  },
  computed: {
    flag() {
      // 正则判断输入手机号的格式，正则方法的test返回的就是布尔值，符合正则规则返回true，不符合返回false
      // disabled属性控制按钮的是否可以点击，true不能点击，false可以点击  所以上面:disabled=!falg
      return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(
        this.tel
      );
    },
  },
  methods: {
    nextreg2() {
      // 验证tel是否存在，如果存在就不能注册，如果不存在才能继续注册
      // 连接接口进行验证
      doCheckPhone({ tel: this.tel }).then((data) => {
        //注意：一定要在数据请求回来之后进行判断，因为请求是个异步代码，如果用this.data的话，请求回来的数据没有机会给this.data已经判断完了。
        console.log(data.data.code);
        if (data.data.code == "10005") {
          //已经注册过
          Dialog.confirm({
            //引入vant
            message: "手机号已注册是否返回登录页",
          })
            .then(() => {
              this.$router.push("/login");
            })
            .catch(() => {
              // on cancel
            });
        } else if (data.data.code == "200") {
          //还未注册
          localStorage.setItem("tel", this.tel);
          this.$router.push("/register/reg2");
        }
      });
    },
  },
};
</script>

<style scoped>
.but {
  width: 80%;
  margin: 1rem auto;
}
</style>